<template>
  <view class="content">
    <up-sticky>
      <view class="header">
        <!-- #ifdef MP-WEIXIN -->
        <wxHeader
          :font_weight="'700'"
          :isSearch="true"
          @toSearch="toSearch"
          :inputWidth="inputWidth"
		  :isDisabled="true"
        ></wxHeader>
        <!-- #endif -->
        <!-- #ifdef H5||APP -->
        <up-input
          @click.stop="toSearch"
          class="input"
          border="none"
          placeholder="这里输入关键字搜索"
          shape="circle"
          clearable
          customStyle="background:#717371"
          placeholderClass="placeholderClass"
          prefixIconStyle="font-size: 22px;color: #fff"
          prefixIcon="search"
        ></up-input>
        <!-- #endif -->
        <view class="header_con">
          <up-tabs
            lineWidth="80rpx"
            lineHeight="6rpx"
            :activeStyle="{ color: '#fff' }"
            :inactiveStyle="{ color: '#fff' }"
            lineColor="#F3E0BB"
            :list="tablist"
            @click="setTab"
          ></up-tabs>
          <view class="header_icon">
            <badge :unreadMessagesNumber="unreadMessagesNumber"></badge>
            <image
              src="http://112.124.50.179:8888/imgs/chaoshan/tixing.png"
              mode=""
              @click="goUrl('/subPages/home/message')"
            ></image>
          </view>
        </view>
      </view>
    </up-sticky>
    <view class="box">
      <mescroll-uni
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :height="height + 'px'"
      >
        <view class="list">
          <view
            class="con"
            v-for="(item, index) in list"
            :key="index"
            @click="
              goUrl('/subPages/chaoshan/detail?item=' + JSON.stringify(item))
            "
          >
            <view class="img">
              <image
                :src="
                  item.articleUrlType === 1
                    ? item.articleUrls[0]
                    : item.videoCover
                "
                mode=""
              ></image>
              <image
                v-if="item.articleUrlType === 2"
                src="http://112.124.50.179:8888/imgs/chaoshan/chaoshan_play.png"
                mode=""
                class="video_play"
              ></image>
              <!-- <view class="fun_l">
								<image
									src="http://112.124.50.179:8888/imgs/chaoshan/pl.png"
									mode=""
								></image>
								<text>{{ item.commentNum }}</text>
							</view> -->
              <view
                class="fun_r"
                @click.native.stop="setPraise(item.id, item.praise)"
              >
                <image
                  src="http://112.124.50.179:8888/imgs/chaoshan/zan.png"
                  mode=""
                  v-if="!item.praise"
                ></image>
                <image
                  src="http://112.124.50.179:8888/imgs/chaoshan/zan_check.png"
                  mode=""
                  v-else
                ></image>
                <text>{{ item.praiseNum }}</text>
              </view>
            </view>
            <view class="txt">
              <view class="title">{{ item.articleTitle }}</view>
              <view class="text">{{ item.articleContent }}</view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script setup>
import wxHeader from "@/components/self-wx-header/self-wx-header.vue";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import badge from "/components/badge/index.vue";
import {
  onShow,
  onLoad,
  onReady,
  onPageScroll,
  onReachBottom,
} from "@dcloudio/uni-app";
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import CommonApi from "@/API/commenApi";
import { askListApi, chaoshanPraiseApi } from "@/API/chaoshan/index.js";
import { loginApi } from "@/API/login/login";

const commonApi = new CommonApi();
const { mescrollInit, downCallback, getMescroll } = useMescroll(
  onPageScroll,
  onReachBottom
);
const tablist = reactive([
  {
    name: "潮汕文化",
  },
  {
    name: "祭拜活动",
  },
]);
let list = ref([]);
let height = ref("0");
let navHeight = ref("0");
let flag = ref(false);
let tabIndex = ref(1);
let inputWidth = ref(0);
const unreadMessagesNumber = ref(0); //未读消息数量

onShow(() => {
  //获取消息未读数量
  getMessageNewCout();
});

onReady(() => {
  setTimeout(() => {
    // 计算头部输入框宽度
    // #ifdef MP-WEIXIN
    inputWidth.value =
      uni.getSystemInfoSync().screenWidth -
      wx.getMenuButtonBoundingClientRect().width -
      uni.upx2px(32 * 4);
    // #endif
    uni
      .createSelectorQuery()
      .select(".header")
      .boundingClientRect((res) => {
        //获取屏幕高度 -头部节点高度 -底部安全距离 -tabber高度
        height.value =
          uni.getSystemInfoSync().screenHeight -
          res.height -
          getApp().globalData.bottom -
          // #ifdef APP || H5
          32 -
          // #endif
          uni.upx2px(24) -
          50;
      })
      .exec();
  }, 300);
});

/**
 * 获取消息未读数量
 */
const getMessageNewCout = async () => {
  let res = await commonApi.getMessageNewCout({
    userId: uni.getStorageSync("userInfo").userId,
  });
  if (res.code === 0) {
    console.log(res.data);
    unreadMessagesNumber.value = 0;
    res.data.unReadedInfo?.map((item) => {
      unreadMessagesNumber.value += item.count;
    });
  }
};

const toSearch = () => {
  goUrl("/subPages/chaoshan/search");
};
const goUrl = (url) => {
  uni.navigateTo({
    url: url,
  });
};

/**
 * 点赞/取消点赞
 */
const setPraise = async (id, praise) => {
  let res = await chaoshanPraiseApi({
    id: id,
    praise: praise === 1 ? 0 : 1,
  });
  console.log("praise", praise);
  if (res.code === 0) {
    uni.showToast({
      title: praise == 0 ? "点赞成功" : "取消成功",
    });
    list.value.map((item) => {
      if (item.id === id) {
        item.praise = res.data.Praise;
        item.praiseNum = res.data.PraiseNum;
      }
    });
    console.log(list.value);
  }
};
const upCallback = async (mescroll) => {
  let rst = await askListApi({
    pageIndex: mescroll.num,
    reqNum: mescroll.size,
    articleType: tabIndex.value,
  });
  if (rst.data.code == 0) {
    const curPageData = rst.data.data.articleItems || []; // 当前页数据
    if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
    curPageData.forEach((ele) => {
      ele.articleUrls = ele.articleUrls.split(",");
    });
    list.value = list.value.concat(curPageData); //追加新数据
    mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
    // mescroll.endBySize(curPageData.length, totalSize)
  } else {
    mescroll.endErr();
  }
};
const setTab = (e) => {
  tabIndex.value = e.index + 1;
  getMescroll().resetUpScroll();
};
</script>

<style lang="scss">
page {
  background-color: #121512;
}

::v-deep.u-tabs__wrapper__nav__item__text {
  font-size: 36rpx !important;
}

.placeholderClass {
  color: #c5c5c5;
  font-size: 26rpx;
}

/* #ifdef H5||APP */
::v-deep.u-input__content {
  padding: 0 32rpx !important;
  height: 64rpx;
}

/* #endif */

.content {
  height: 100%;
}

.header {
  // position: sticky;
  // top: 0;
  // z-index: 999;
  // /* #ifdef APP-PLUS||H5 */
  // height: 88rpx;
  // /* #endif */
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 32rpx;
  display: flex;
  background-color: #121512;
  flex-direction: column;
  justify-content: center;

  .header_con {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_icon {
      display: flex;
      position: absolute;
      right: 0rpx;

      image {
        width: 56rpx;
        height: 56rpx;
        padding-left: 30rpx;
      }
    }
  }

  .search {
    display: flex;
    align-items: center;

    .input {
      margin: 0 32rpx;
    }

    text {
      color: #f3e0bb;
    }
  }
}

.box {
  overflow: auto;

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .con {
      width: 48%;
      margin-bottom: 24rpx;
      background-color: #292b2a;
      color: #fff;
      border-radius: 10rpx;

      .img {
        height: 454rpx;
        position: relative;

        .video_play {
          position: absolute;
          z-index: 99;
          top: 8rpx;
          right: 8rpx;
          width: 40rpx;
          height: 40rpx;
        }

        .fun_l,
        .fun_r {
          position: absolute;
          z-index: 99;
          display: flex;
          align-items: center;

          text {
            padding-left: 6rpx;
          }

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .fun_l {
          left: 16rpx;
          bottom: 16rpx;
        }

        .fun_r {
          right: 16rpx;
          bottom: 16rpx;
        }

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx 10rpx 0 0;
        }
      }

      .txt {
        padding: 16rpx;

        .title {
          // font-weight: bold;
          white-space: nowrap;
          /* 确保文本不会换行 */
          overflow: hidden;
          /* 隐藏超出容器的文本 */
          text-overflow: ellipsis;
          /* 当文本超出容器时显示省略号 */
        }

        .text {
          padding-top: 8rpx;
          font-size: 24rpx;
          white-space: pre-wrap;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        // .foot {
        // 	display: flex;
        // 	justify-content: space-between;

        // 	view {
        // 		display: flex;
        // 		align-items: center;
        // 		font-size: 24rpx;

        // 		text {
        // 			padding-left: 6rpx;
        // 		}
        // 	}
        // }
      }
    }
  }
}
</style>
